<template>
  <div>
    <!-- <div v-show="first == 1" style="width:100vw;height:100vh;">
      <img class="page" src="../../static/tu.jpg" />
      <div class="bottom">
        <van-button style="width:60vw;" round color="#6E8EF1" type="danger" @click="go">立即申请</van-button>
      </div>
    </div> -->
    <!-- <div v-show="first == 3" class="suc">
      <div class="h3">
        初审成功!
        <div style="fontSize:16px">
          <br />已根据您的信息为您匹配客户经理
        </div>
      </div>
    </div> -->
    <div v-show="first == 4" class="suc">
      <div class="h2">{{wait}}</div>
    </div>
    <div v-show="first == 1">
      <!-- <div class="title">
        <span class="height">信用卡进度查询</span>
      </div> -->
      <div class="city">
        <!-- <van-cell
          v-model="areaName"
          @click="onAreaClick"
          title-class="left_cell"
          center
          title="您工作的城市"
          is-link
          size="large"
        /> -->
        <van-divider :style="{ color: '#D3D3D3', borderColor: '#D3D3D3', margin: '0 0' }"></van-divider>
        <van-field 
          style="height:40px; textAlign: center;alignItems:center;"
          v-model="username"
          label="您的姓名："
          size="normal"
          rows="1"
          maxlength="7"
          placeholder="请输入姓名"
          autosize
        >
          <!-- <template #button>
            <van-tabs color="#6E8EF1" v-model="sex" type="card" @click="onSexClick">
              <van-tab title="先生"></van-tab>
              <van-tab title="女士"></van-tab>
            </van-tabs>
          </template> -->
        </van-field>
        <van-divider :style="{ color: '#D3D3D3', borderColor: '#D3D3D3', margin: '0 0' }"></van-divider>
        <van-field
        style="height:40px; textAlign: center;alignItems:center;"
          v-model="num"
          label="手机号码："
          label-class="left_cell2"
          rows="1"
          maxlength="11"
          placeholder="请输入电话号码"
          autosize
          type="tel"
        />
        <van-divider :style="{ color: '#D3D3D3', borderColor: '#D3D3D3', margin: '0 0' }"></van-divider>
        <van-field
        style="height:40px; textAlign: center;alignItems:center;"
          v-model="idCard"
          label="身份证号码："
          label-class="left_cell2"
          size="normal"
          rows="1"
          maxlength="18"
          placeholder="请输入身份证号码"
          autosize
        />
        <van-divider :style="{ color: '#D3D3D3', borderColor: '#D3D3D3', margin: '0 0' }"></van-divider>
        <van-field
        style="height:40px; textAlign: center;alignItems:center;"
          v-model="referrer"
          label="推荐人："
          label-class="left_cell2"
          size="normal"
          rows="1"
          placeholder="请输入推荐人姓名"
          autosize
        />
        <van-divider :style="{ color: '#D3D3D3', borderColor: '#D3D3D3', margin: '0 0' }"></van-divider>
        <!-- <van-field
          v-model="sms"
          maxlength="4"
          center
          type="number"
          clearable
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              color="#6E8EF1"
              style="width:80px"
              :text="smsTxt"
              size="small"
              type="primary"
              @click="sendSms"
            ></van-button>
          </template>
        </van-field> -->
        <!-- <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', margin: '0 0' }"></van-divider> -->
        <!-- <van-field v-model="money" label="贷款金额" type="number" maxlength="10" input-align="right">
          <template #button>
            <span>万元</span>
          </template>
        </van-field> -->
        <!-- <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
          <van-area
            value="320500"
            :area-list="areaList"
            :columns-num="2"
            :columns-placeholder="['', '']"
            @change="cityChanged"
            @cancel="onCityCancel"
            @confirm="onCityConfirm"
          />
        </van-popup>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', margin: '0 0' }"></van-divider>
      </div> -->
      <!-- <div class="label1"> -->
        <!-- <div class="label1Txt">
          补充详细信息 通过率提高30%
          <van-image
            style="verticalAlign:middle;"
            width="20px"
            height="20px"
            src="../../static/1.png"
          />
        </div> -->
      </div>
      <!-- <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', margin: '0 0' }"></van-divider> -->
      <!-- <div>
        <div class="car">
          <van-icon style="verticalAlign:middle;" name="stop" />社保公积金
        </div>

        <van-tabs color="#6E8EF1" v-model="gjj" type="card" @click="onSexClick">
          <van-tab title="无"></van-tab>
          <van-tab title="都有"></van-tab>
          <van-tab title="仅社保"></van-tab>
          <van-tab title="仅公积金"></van-tab>
        </van-tabs>
      </div> -->
      <!-- <div>
        <div class="car">
          <van-icon style="verticalAlign:middle;" name="stop" />车辆
        </div>
        <van-tabs color="#6E8EF1" v-model="car" type="card" @click="onSexClick">
          <van-tab title="无"></van-tab>
          <van-tab title="全款"></van-tab>
          <van-tab title="按揭"></van-tab>
        </van-tabs>
      </div>
      <div>
        <div class="car">
          <van-icon style="verticalAlign:middle;" name="stop" />寿险
        </div>
        <van-tabs color="#6E8EF1" v-model="sx" type="card" @click="onSexClick">
          <van-tab title="无"></van-tab>
          <van-tab title="月缴纳"></van-tab>
          <van-tab title="年缴纳"></van-tab>
        </van-tabs>
      </div>
      <div>
        <div>
          <div class="car">
            <van-icon style="verticalAlign:middle;" name="stop" />名下房产
          </div>
          <van-tabs color="#6E8EF1" v-model="house" style="padding" type="card" @click="onSexClick">
            <van-tab title="无"></van-tab>
            <van-tab title="按揭房"></van-tab>
            <van-tab title="全款房"></van-tab>
          </van-tabs>
        </div>
      </div> -->

      <div style="margin: 30px auto; width:200px; ">
        <van-button block  color="#1E90FF" size="small" type="info" @click="submit">查询</van-button>
      </div>
      <!-- <div class="agree">
        <van-checkbox
          label-class="xxxx"
          v-model="checked"
          label-disabled
          shape="square"
          checked-color="#6E8EF1"
          bind:change="onChange"
        >
          <div class="proto1">同意</div>
          <div class="proto" @click="onProto">《服务协议》</div>
        </van-checkbox>
      </div>
      <div class="shenm">声明：请勿将个人信息、账户、电子渠道交由他人使用，保护个人账户安全。</div> -->
    </div>
    <div v-show="first == 2">
      <!-- <div class="title">
        <span class="height">审核结果</span>
      </div> -->
      <!-- <van-divider :style="{ color: '#D3D3D3', borderColor: '#D3D3D3', margin: '0 0' }"></van-divider> -->
      <!-- <van-field
          style="height:50px; textAlign: center;alignItems:center;"
          v-model="username"
          label="您的姓名"
          label-class="left_cell2"
          size="large"
          rows="1"
          maxlength="7"
          @placeholder="stop"
          autosize
          type="textarea"
          readonly
        > -->
        <van-cell    value-class="cell-text-value" style="height:40px; textAlign:left;alignItems:center;" title="查询流水号:"  v-bind:value="serial_number" />
          <!-- <template #button>
            <van-tabs color="#6E8EF1" v-model="sex" type="card" @click="onSexClick">
              <van-tab title="先生"></van-tab>
              <van-tab title="女士"></van-tab>
            </van-tabs>
          </template> -->
        <!-- </van-field> -->
        <van-divider :style="{ color: '#D3D3D3', borderColor: '#D3D3D3', margin: '0 0' }"></van-divider>
      <van-cell   value-class="cell-text-value"  style="height:40px; textAlign:left;alignItems:center;" title="查询日期:"  v-bind:value="application_data"/>
          <!-- <template #button>
            <van-tabs color="#6E8EF1" v-model="sex" type="card" @click="onSexClick">
              <van-tab title="先生"></van-tab>
              <van-tab title="女士"></van-tab>
            </van-tabs>
          </template> -->
        <!-- </van-field> -->
        <van-divider  :style="{ color: '#D3D3D3', borderColor: '#D3D3D3', margin: '0 0' }"></van-divider>
      <van-cell    value-class="cell-text-value"  style="height:40px; textAlign:left;alignItems:center;" title="办理进度:"  value="预审通过，面签放款"/>
          <!-- <template #button>
            <van-tabs color="#6E8EF1" v-model="sex" type="card" @click="onSexClick">
              <van-tab title="先生"></van-tab>
              <van-tab title="女士"></van-tab>
            </van-tabs>
          </template> -->
        <!-- </van-field> -->
        <van-divider :style="{ color: '#D3D3D3', borderColor: '#D3D3D3', margin: '0 0' }"></van-divider>
      <van-cell   value-class="cell-text-value"  style="height:40px; textAlign:left;alignItems:center;" title="审批额度:"  value="200,000.00元"/>
      <van-divider :style="{ color: '#D3D3D3', borderColor: '#D3D3D3', margin: '0 0' }"></van-divider>
      <!-- <van-cell  title-class="cell-text-value"  style="height:40px; textAlign:right;alignItems:center;" title="已根据您的信息为您匹配客户经理,请耐心等候..."  />
      <van-divider :style="{ color: '#D3D3D3', borderColor: '#D3D3D3', margin: '0 0' }"></van-divider> -->

    </div>
  </div>
</template>

<script>
import list from "../areaList";
export default {
  name: "HelloWorld",
  data() {
    return {
      show: false,
      areaList: "",
      username: "",
      sms: null,
      sex: 3,
      areaName: "江苏省/苏州市",
      num: null,
      money: null,
      smsTxt: "发送验证码",
      timer: null,
      canSend: true,
      countDown: 60,
      first: 1,
      idCard: null,
      referrer :null,
      checked: true,
      gjj: 0,
      car: 0,
      sx: 0,
      house: 0,
      info: "",
      wait: "等待中.",
      timer2: null,
      application_data:"1970.01.01",
      serial_number:"ABCDEFGHOJKLMN",
    };
  },
  created() {
    this.areaList = list;
  },
  mounted() {
    this.first = 1;
    this.canSend = true;
    this.timer = null;
    this.timer2 = null;
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
    clearInterval(this.timer2);
    this.timer2 = null;
  },
  methods: {
    cityChanged(picker, index, value) {
      let val = picker.getValues();
      let areaName = "";
      for (var i = 0; i < val.length; i++) {
        areaName = areaName + (i == 0 ? "" : "/") + val[i].name;
      }
      this.areaName = areaName;
    },
    onCityCancel() {
      this.show = false;
    },
    onCityConfirm() {
      this.show = false;
    },
    onAreaClick() {
      this.show = true;
    },
    onSexClick() {},
    sendSms() {
      if (!this.canSend) return;
      //console.log(this.num);
      this.axios
        .get("http://scan.bigshiyan.com/sms", {
          params: {
            mobile: this.num
          }
        })
        .then(response => {
          console.log(response.data);
          if (response.data.code == 200) {
            this.changeSmsState();
            this.showTip("短信发送成功");
          } else {
            this.showTip(response.data.msg);
          }
        });
    },
     isCardNo(card){
    //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
    var reg1 = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;
    return reg1.test(card)
},
    isPhone(phone) {
    var reg2=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
    return reg2.test(phone)
    },  
    isName(name)
    {
      var reg3 = /^[\u4e00-\u9fa5]{1,}((·[\u4e00-\u9fa5]{1,}){0,3})$/;
    return !reg3.test(name)
    },

    submit() {
      // if(!this.isCardNo(this.idCard))
      // {
      //   this.showTip("请输入正确的身份证号码");
      //   return;
      // }
      //
      // this.changeWait();
      //       this.application_data =response.data.data.create_date
      //       this.serial_number =response.data.data.order_no.toUpperCase()
    
      var url = "http://jrfw.leekay.cn/index/save?name="+this.username+"&mobile="+this.num+"&cardid=" +this.idCard+"&referrer=" +this.referrer
      this.axios
        .get(url)
        .then(response => {
          console.log(response)
          if (response.data.code == 200) {
            this.application_data =response.data.data.create_date
            this.serial_number =response.data.data.order_no.toUpperCase()
            this.changeWait();
          } else {
            this.showTip(response.data.msg);
          }
        });
    },
    setExtraData() {
      var str = "社保公积金:";
      switch (this.gjj) {
        case 1:
          str += "都有;";
          break;
        case 2:
          str += "仅社保;";
          break;
        case 3:
          str += "仅公积金;";
          break;
        default:
          str += "无;";
      }
      str += "车辆:";
      switch (this.car) {
        case 1:
          str += "全款;";
          break;
        case 2:
          str += "按揭;";
          break;
        default:
          str += "无;";
          break;
      }
      str += "寿险:";
      switch (this.sx) {
        case 1:
          str += "月缴纳;";
          break;
        case 2:
          str += "年缴纳;";
          break;
        default:
          str += "无;";
      }
      str += "名下房产:";
      switch (this.house) {
        case 1:
          str += "按揭房;";
          break;
        case 2:
          str += "全款房;";
          break;
        default:
          str += "无;";
      }
      this.info = str;
    },
    changeSmsState() {
      clearInterval(this.timer);
      this.timer = null;
      this.countDown = 60;
      this.smsTxt = this.countDown.toString();
      this.canSend = false;
      this.timer = setInterval(() => {
        this.countDown--;
        this.smsTxt = this.countDown.toString();
        if (this.countDown <= 0) {
          this.canSend = true;
          this.smsTxt = "发送验证码";
        }
      }, 1000);
    },
    changeWait() {
      // this.first = 5;
      clearInterval(this.timer2);
      this.timer2 = null;
      var time = 1500;
      // var count = 0;
      this.timer2 = setInterval(() => {
        time -= 500;
        // count += 1;
        // if (count > 2) count = 0;
        // if (count == 0) this.wait = "等待中.";
        // if (count == 1) this.wait = "等待中..";
        // if (count == 2) this.wait = "等待中...";
        // if (count == 3) this.wait = "等待中";
        if (time <= 0) {
          this.first = 2;
          // clearInterval(this.timer2);
          // this.timer2 = null;
        }
      }, 500);
    },
    onChange(e) {
      this.checked = e.detail;
    },
    onProto(event) {
      this.showTip(this.str);
    },
    go() {
      this.first = 2;
    },
    showTip(msg) {
      this.$dialog
        .alert({
          message: msg,
          theme: "round-button"
        })
        .then(() => {
          // on close
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped>
.cell-left{
  color: yellow;
}
.cell-text-value{
  color: black;
}
.title {
  width: 100%;
  height: 44px;
  background-color: #f8f8f8;
  text-align: center;
}
.height {
  line-height: 40px;
  vertical-align: middle;
  color:black;
}
.left_cell {
  color: #646566;
  margin-left: 0;
  text-align: left;
}
.suc {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #6e8ef1;
}
.h3 {
  position: absolute;
  width: 90vw;
  height: 50vh;
  text-align: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-family: arial;
  color: white;
  font-size: 20px;
}
.h2 {
  position: absolute;
  width: 90vw;
  height: 20vh;
  text-align: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-family: arial;
  color: white;
  font-size: 20px;
}
.agree {
  margin-top: 14px;
  margin-left: 10px;
}
.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.proto {
  display: inline;
  color: black;
  font-style: normal;
  font-size: 10px;
}
.proto1 {
  display: inline;
  color: gray;
  font-style: normal;
  font-size: 14px;
}
.shenm {
  width: 100vw;
  position: absolute;
  font-size: 10px;
  color: gray;
  left: 0px;
  margin-top: 5px;
  word-wrap: normal;
  text-align: justify;
}
.bottom {
  position: absolute;
  bottom: 5px;
  left: 0px;
  width: 100vw;
  text-align: center;
}
.label1 {
  height: 30px;
  text-align: center;
}
.label1Txt {
  vertical-align: center;
  line-height: 30px;
  color: #6e8ef1;
  font-size: 16px;
  font-family: "Microsoft YaHei", "Arial", "黑体", "宋体", sans-serif;
}
.car {
  color: gray;
  text-align: start;
  margin-left: 14px;
  font-family: "Microsoft YaHei", "Arial", "黑体", "宋体", sans-serif;
}
</style>
